<template>
  <div id="order">
    <div class="title">
      <a @click="toMange"><<座位列表</a>
    </div>
    <div class="date">
      <div
        :class="i == index ? 'active' : ''"
        @click="Active(i)"
        :key="v.id"
        v-for="(v, i) in week"
      >
        {{ v.name }}
      </div>
    </div>
    <div class="area">
      <div
        :class="i == idx ? 'active' : ''"
        @click="toActive(i,v.id)"
        :key="v.id"
        v-for="(v, i) in area"
      >
        {{ v.name }}
      </div>
    </div>
    <div class="desk">
      <div class="deskNum" :key="i" v-for="(v, i) in desk_rows">
        <div class="Num">{{ v.sname }}</div>
        <div class="deskTime" :key="i2" v-for="(v2, i2) in v.orderSeats" :style=" v2.state==1?'background:#999898':'' " >
          <span> {{ v2.orderTime}}</span>
          <span> {{v2.state==1?"满员":"空闲"}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      week: [
        { id: 1, name: "星期一" },
        { id: 2, name: "星期二" },
        { id: 3, name: "星期三" },
        { id: 4, name: "星期四" },
        { id: 5, name: "星期五" },
        { id: 6, name: "星期六" },
        { id: 7, name: "星期天" },
      ],
      desk_rows: [],
      index: 0,
      idx: 0,
      area:[],
      areaId:1
    };
  },
  methods: {
    //渲染数据
    getData:function(){
      this.$axios({
        url:'/orderseat/queryall',
        method:'post',
        data:{
          areaId:this.areaId
        }
      }).then(({data})=>{
        this.desk_rows=data.data
      })
    },
    Active: function (i) {
      this.index = i;
    },
    toActive: function (i,id) {
      this.idx = i;
      this.areaId=id
      this.getData()
    },
    //获取区域
    toArea:function(){
      this.$axios({
        url:'/area/queryall',
        method:'get',
        
      }).then(({data})=>{
        let arr=data.data
        for(let i in arr){
          delete arr[i].remark
          delete arr[i].price
        }
        this.area=arr
      })
    },
    toMange:function(){
      this.$router.push("/home/SeatManage")
    }
  },
  mounted:function(){
    this.toArea()
    this.getData()
  }
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
#order {
  padding: 0;
  text-align: left;
  line-height: 0;
  .title {
    height: 40px;
    display: flex;
    justify-content: space-between;
    a {
      color: #02a7f0;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .date {
    background: #f2f2f2;
    display: flex;
    height: 50px;
    div {
      height: 50px;
      line-height: 50px;
      text-align: center;
      flex: 1;
      cursor: pointer;
    }
  }
  .area {
    margin-top: 10px;
    background: #f2f2f2;
    display: flex;
    height: 50px;
    div {
      height: 50px;
      line-height: 50px;
      text-align: center;
      flex: 1;
      cursor: pointer;
    }
  }
  .active {
    color: white;
    background: #999898;
  }
  .desk {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex: 1;
    .deskNum {
      display: flex;
      padding: 0 10px 0 10px;
      flex: 1;
      flex-direction: column;
      align-items: center;
      .Num {
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      .deskTime {
        width: 130px;
        border-radius: 5px;
        height: 60px;
        background: #81d3f8;
        margin-bottom: 20px;
        line-height: 40px;
        font-size: 12px;
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
          width: 130px;
          height: 20px;
          line-height: 20px;
          text-align: center;
        }
      }
      .active {
        background: #aaaaaa;
        color: rgb(255, 255, 255);
      }
    }
  }
}
</style>
